<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Video</title>
	<link rel="stylesheet" href="style.css">
	<style>
		.video_title{
			font-size: 2em;
			margin: 10px 10px 10px 20px;
		}
		.video_description{
			font-size: 1.1em;
			margin: 0 20px 20px 30px;
			padding: 10px;
			border: 2px solid #999;
			border-radius: 5px;
		}
		.video_description p{
			padding: 10px;
			border-bottom: 2px solid #555;
		}
		.video_description a{
			color: #4a4a4a;
			text-decoration: none;
		}
		.video_description a:hover{
			color: #2d2b2b;
		}
	</style>
</head>
<body>
	<div class="video_wrapper">
		<video src="https://mazwai.com/videvo_files/video/free/2016-04/small_watermarked/the_valley-graham_uheslki_preview.webm" id="video"></video>
		<div class="player_controls">
			<span class="player_play_pause">
				<img src="sources/player_icons/pause.svg" alt="play">
			</span>
			<span class="player_mute">
				<img src="sources/player_icons/volume_on.svg" alt="volume on">
			</span>
			<div class="player_volume">
				<div class="player_volume_track"></div>
				<div class="player_volume_slider"></div>
			</div>
			<span class="player_current_time">00:00</span>
			<div class="player_tracks">
				<div class="player_track_full"></div>
				<div class="player_track_current"></div>
			</div>
			<span class="player_full_time">00:00</span>
			<span class="player_fullscreen">
				<img src="sources/player_icons/fullscreen.svg" alt="fullscreen">
			</span>

		</div>
	</div>
	<h2 class="video_title">Demo video</h2>
	<div class="video_description">
		<p><a href="https://mazwai.com/video/the-valley/455101" target="_blank">Video author</a></p>
		<p>Icons from <a href="https://www.iconfinder.com/" target="_blank">website</a></p>
		<p><a href="https://github.com/s2-name/Video-player/" target="_blank">Source code</a></p>
	</div>

<script src="video-player.js"></script>
<script src="scripts.js"></script>
</body>
</html>
